<template>
    <div class="news-list">
        <div class="news-item" v-for="item in news" :key="item.id">
            <div class="item-img">
                <el-image class="image" v-if="item.have_pic" :src="item.img" fit="cover">
                </el-image>
                <el-image class="image" v-else src="" fit="contain">

                </el-image>
            </div>
            <div class="item-content">
                <h4>{{item.title}}</h4>
                <p>{{item.desc}}</p>
            </div>
        </div>
        <div v-if="havePage">

        </div>
    </div>
</template>

<script>
    export default {
        name: "NewsList",
        props: {
            news: Array,
        },
        created() {

        },
        data() {
            return {
                havePage: true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .news-list {
        .news-item {
            display: flex;
            flex-flow: row nowrap;
            /*border: 1px solid #2e87cd;*/
            margin: 24px 0;
            padding: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

            .item-img {
                width: 200px;
                height: 150px;
                box-sizing: border-box;

                .image {
                    width: 100%;
                    height: 100%;
                }
            }

            .item-content {
                flex: 1;
                margin-left: 12px;

                h4 {
                    color: #303133;
                }

                p {
                    margin-top: 12px;
                    color: #606266;
                    font-size: 15px;
                }
            }
        }

        .pagination{
            background-color: burlywood;
        }
        .pagination li {
            float: left;
        }
    }
</style>
